<template>
  <div class="server_list">
    <Card>
		<!-- 搜索部分 -->
		<div class="top">
			<Input v-model="ip" placeholder="输入IP地址进行搜索" style="width: 300px" />
			<Input v-model="name" placeholder="输入服务器名称进行搜索" style="width: 300px" />
			<Button type="primary" @click="search()" class="large" style="padding:0 40px">搜索</Button>
		</div>
		<!-- 搜索部分结束 -->
		<!-- 工单列表 -->
		<Table :columns="columns" :data="tableData"></Table>
		<div class="center">
			<div class="pageBox">
				<Page :total="count" show-total :page-size ="pageSize" @on-change="handlePage"/>
			</div>
		</div>
		<Modal v-model="show" title="操作日志">
			{{text}}
		</Modal>
    </Card>
  </div>
</template>

<script>
export default {
  data () {
    return {
			// 列表头部配置
		columns: [
        {
			title: '服务器名称',
			key: 'name'
		},
		{
			title: 'IP地址',
			key: 'ip'
		},
		{
			title: 'CPU使用率',
			key: 'cpu'
		},
		{
			title: '内存用量/总量',
			key: 'memory'
		},
		{
			title: '硬盘用量/总量',
			key: 'caliche'
		},
		{
			title: '流量',
			key: 'flow'
		},
		{
			title: '分组',
			key: 'group'
		},
		{
			title: '状态',
			key: 'status'
		},
        {
			title: '操作',
			key: 'handle',
			render: (h, params) => {
				return h('div', [
					h('Button', {
						props: {
							type: 'text',
							size: 'small'
						},
						style: {
							margin: '5px',
							background: 'url(../../../../static/images/bind.png) no-repeat',
							paddingLeft: '30px'
						},
						on: {
							click: () => {
								this.show = true
								this.text = params.row.people + '于' + params.row.date + '进行了' + params.row.thing + '（' + params.row.type + ')' + '的操作'
							}
						}
					}, '解除绑定'),
					h('Button', {
						props: {
							type: 'text',
							size: 'small'
						},
						style: {
							margin: '5px',
							background: 'url(../../../../static/images/see.png) no-repeat',
							paddingLeft: '30px'
						},
						on: {
							click: () => {
								this.show = true
								this.text = params.row.people + '于' + params.row.date + '进行了' + params.row.thing + '（' + params.row.type + ')' + '的操作'
							}
						}
					}, '查看详情'),
					h('Button', {
						props: {
							type: 'text',
							size: 'small'
						},
						style: {
							margin: '5px',
							background: 'url(../../../../static/images/change.png) no-repeat',
							paddingLeft: '30px'
						},
						on: {
							click: () => {
								this.show = true
								this.text = params.row.people + '于' + params.row.date + '进行了' + params.row.thing + '（' + params.row.type + ')' + '的操作'
							}
						}
					}, '硬件变更记录')
				])
			}
        }
      ],
    tableData: [],
	show: false,
	count: 0,
	pageSize: 5,
	page: 1,
	startTime: '',
	endTime: '',
	text: '',
	ip: '',
	name: ''
	}
  },
  methods: {
		// 分页页码跳转
		handlePage (value) {
			this.page = value
			this.$api.post(0, '/worklist/feedback/selFeedBackWorkList', {uid: this.user.id, workListCode: '', startTime: '', endTime: '', font: '', page: this.page, pageSize: 5}, r => {
				this.tableData = r.data.data
			})
		},
		// 搜索
		search () {
// 			this.$api.post('/worklist/feedback/selFeedBackWorkList', {uid: this.user.id, workListCode: this.formItem.workcode, startTime: this.startTime, endTime: this.endTime, font: this.formItem.keyWork, page: 0, pageSize: 5}, r => {
// 				if (r.data.data.length !== 0) {
// 					this.count = r.data.data[0].count
// 					this.tableData = r.data.data
// 				} else {
// 					this.$Message.warning('没有获取到相关的数据')
// 					this.count = r.data.data.length
// 					this.tableData = r.data.data
// 				}
// 			})
		},
		// 获取列表数据
		getList () {
			this.$api.post(0, '/worklist/feedback/selFeedBackWorkList', {uid: this.user.id, workListCode: '', startTime: '', endTime: '', font: '', page: 0, pageSize: 5}, r => {
				if (r.data.data.length !== 0) {
					this.count = r.data.data[0].count
					this.tableData = r.data.data
				}
			})
		}
  },
  mounted () {
		this.user = JSON.parse(sessionStorage.user)
		this.tableData = [
			{
				name: 'WIN-WOEZOEI90',
				ip: '162.168.08.00',
				cpu: '18%',
				memory: '4G',
				caliche: '481G/5990G',
				flow: '1.08M',
				group: '分组 A',
				status: '正常'
			}
		]
  },
	watch: {
		// 页面跳转再次执行
		'$route' (to, from) {
			this.getList()
		}
	}
}
</script>
